import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const CustomHeader = ({ title, showMenuButton = true, onFilterPress }) => {
  const navigation = useNavigation();

  return (
    <View style={styles.header}>
      <Text style={styles.title}>{title}</Text>
      <View style={styles.rightContainer}>
        {onFilterPress && (
          <TouchableOpacity 
            style={styles.filterButton}
            onPress={onFilterPress}
          >
            <Text style={styles.filterIcon}>⚙️</Text>
          </TouchableOpacity>
        )}
        {showMenuButton && (
          <TouchableOpacity 
            style={styles.menuButton}
            onPress={() => navigation.openDrawer()}
          >
            <Text style={styles.menuIcon}>☰</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    backgroundColor: '#2196F3',
    elevation: 4,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  title: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
  },
  rightContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  filterButton: {
    padding: 8,
    marginRight: 10,
  },
  filterIcon: {
    color: 'white',
    fontSize: 20,
  },
  menuButton: {
    padding: 8,
  },
  menuIcon: {
    color: 'white',
    fontSize: 24,
  },
});

export default CustomHeader;